import react from "@vitejs/plugin-react"
import { resolve } from "path"
import { visualizer } from "rollup-plugin-visualizer"
import { ConfigEnv, loadEnv } from "vite"
import eslintPlugin from "vite-plugin-eslint"
import { createHtmlPlugin } from "vite-plugin-html"
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
// import viteCompression from "vite-plugin-compression";
import { defineConfig, UserConfig } from "vitest/config"

// @see: https://vitejs.dev/config/
export default defineConfig((mode: ConfigEnv): UserConfig => {
	const env = loadEnv(mode.mode, process.cwd())

	return {
		base: env.VITE_PUBLIC_PATH,
		// alias config
		resolve: {
			alias: {
				"@": resolve(__dirname, "./src")
			}
		},
		// global css
		css: {
			modules: {
				// 转换类名（camelCase为驼峰、camelCaseOnly只为驼峰其他都被替换、
				// dashes为中划线、dashesOnly为只能是中划线）
				localsConvention: "dashes",

				// 设置样式是否是局部的 local(默认)生成hash，global全局样式
				scopeBehaviour: "local",

				// 设置样式命名方式
				generateScopedName: "[hash:5]_[name]_local",
				// generateScopedName: (name, filename, css) => {
				// 	return `${name}${filename}${css}`;
				// },

				// 默认类名+其他字符串（文件名、随机）加入到hash生成中
				hashPrefix: "myPro"

				// 不解析该文件样式名，一般用于引入第三方
				// globalModulePaths: ["base.module.css"]
			},
			preprocessorOptions: {
				less: {
					// modifyVars: {
					// 	"primary-color": "#1DA57A",
					// },
					javascriptEnabled: true,
					additionalData: `@import "@/styles/var.less";`
				}
			}
		},
		// server config
		server: {
			host: "0.0.0.0", // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
			// port: viteEnv.VITE_PORT,
			// open: viteEnv.VITE_OPEN,
			port: 2025,
			open: true,
			cors: true,
			// https: false,
			// 代理跨域（mock 不需要配置，这里只是个事列）
			proxy: {
				// "/dx-client-server": {
				// 	target: "https://player-gateway-dev.ak12.cc/dx-player-gateway/dx-client-server/",
				// 	changeOrigin: true,
				// 	rewrite: path => path.replace(/^\/dx-client-server/, "")
				// }
			}
		},
		// plugins
		plugins: [
			react(),
			// dynamicImport(/* options */),
			createHtmlPlugin({
				inject: {
					data: {
						// title: viteEnv.VITE_GLOB_APP_TITLE
					}
				}
			}),
			// * 使用 svg 图标
			createSvgIconsPlugin({
				iconDirs: [resolve(process.cwd(), "src/assets/icon")],
				symbolId: "icon-[dir]-[name]"
			}),
			// * EsLint 报错信息显示在浏览器界面上
			eslintPlugin(),
			// * 是否生成包预览
			!!env.VITE_REPORT && visualizer()
			// * gzip compress
			// viteEnv.VITE_BUILD_GZIP &&
			// 	viteCompression({
			// 		verbose: true,
			// 		disable: false,
			// 		threshold: 10240,
			// 		algorithm: "gzip",
			// 		ext: ".gz"
			// 	})
		],
		esbuild: {
			// pure: viteEnv.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : []
		},
		// build configure
		build: {
			outDir: "dist",
			// esbuild 打包更快，但是不能去除 console.log，去除 console 使用 terser 模式
			// minify: "esbuild",
			minify: "terser",
			terserOptions: {
				compress: {
					drop_console: true,
					drop_debugger: true
				}
			},
			rollupOptions: {
				output: {
					// Static resource classification and packaging
					chunkFileNames: "assets/js/[name]-[hash].js",
					entryFileNames: "assets/js/[name]-[hash].js",
					assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
				}
			}
		},
		// vitest config
		test: { globals: true, reporters: ["default", "html"], outputFile: "Coverage/index.html", environment: "jsdom" }
	}
})
